<template>
    <div  class="box">
        <div>
            <strong>{{ objectId ? '编辑产品' : '增加产品' }}</strong>
        </div>
          <div class="Central" >
            <div class="center">
                <el-form
            ref="formRef"
            :rules="rules"
            label-width="auto"
            :model="formLabelAlign"
            style="width: 600px"
            >
           <el-form-item label="序号"  prop="no">
                <el-input v-model="formLabelAlign.no" />
            </el-form-item>
            <el-form-item label="产品编号"  prop="productId">
                <el-input v-model="formLabelAlign.productId" />
            </el-form-item>
            <el-form-item label="产品名称"  prop="productName">
                <el-input v-model="formLabelAlign.productName" />
            </el-form-item>
            <el-form-item label="产品计划"  prop="productPlan">
                <el-input v-model="formLabelAlign.productPlan" />
            </el-form-item>
            </el-form>
            </div>
            
          
          <div class="center">
            <el-form-item>
                <el-button type="primary" @click="handleSave(formRef)" plain>保存</el-button>
                <el-button type="success" @click="handleReset" plain>重置</el-button>
                <el-button type="danger" plain @click="handleBack">取消</el-button>
           </el-form-item>
          </div>
        </div>
    </div>
</template> 

<script setup lang="ts">
import { reactive , ref } from 'vue'
import  type { FormInstance , FormRules } from 'element-plus'
import type { Product } from '../../type/product';
import { getProduct,updateProduct } from '../../http/product'
import { ElMessage } from 'element-plus'
import { useRouter,useRoute } from 'vue-router';
import { onMounted }from 'vue'
import productStore from '../../store/productStore';
import {productM, iProductM} from '../../hooks/productM'
const product_s =productStore()
const productMH :iProductM = productM()

const formRef = ref<FormInstance>()


const route= useRoute();
const router= useRouter();
const objectId=ref<string>('')

const formLabelAlign = reactive<Product>({
  no: '',
  productId: '',
  productName: '',
  productPlan: '',
})

onMounted(async() => {
    console.log("route.query.objectId:", route.query.objectId); // 调试
    if(route.query?.objectId){
        objectId.value=route.query.objectId as string;
        const result =await getProduct(objectId.value)
        formLabelAlign.no=result.data.no;
        formLabelAlign.productId=result.data.productId;
        formLabelAlign.productName=result.data.productName;
        formLabelAlign.productPlan=result.data.productPlan;
    }
})

const rules =reactive<FormRules<Product>>({
    no:[
        {
            required:true,
            message:'请输入序号',
            trigger:'blur'
        }
    ],
    productId:[
        {
            required:true,
            message:'请输入产品id',
            trigger:'blur'
        }
    ],
    productName:[
        {
            required:true,
            message:'请输入产品名称',
            trigger:'blur'
        }
    ],
    productPlan:[
        {
            required:true,
            message:'请输入产品计划',
        }
    ]
})


const handleSave = async(formE1:FormInstance|undefined ) => {
    if(!formE1) return
    await formE1.validate(async (valid)=>{
        if(valid){
            console.log('submit')
            try {
        console.log(formLabelAlign);
        
        if(route.query.objectId){
            productMH.updateProductHook(formLabelAlign,objectId.value)
        }else{
            productMH.addProductHook(formLabelAlign)
        }
        }catch{

}     
}})
   }

const handleReset = () => {
    formLabelAlign.no= '';
    formLabelAlign.productId='';
    formLabelAlign.productName= '';
    formLabelAlign.productPlan= '';
}

const handleBack=()=>{
    router.push('/home/product')
}
</script>

<style lang="scss" scoped>
.Central{

    padding: 20px;
}
.center{
    display: flex;
    justify-content: center;
}
.box{
    border: 2px rgb(224, 224, 224) solid ;
    border-radius:20px;
    box-shadow: 4px 4px 4px 4px rgba(180, 180, 179, 0.5);
    width: 1000px;
    padding: 10px;
    margin: 10px;
}
</style>